
import React from 'react'

 //属性的类型
type Props={

  onAddTodo(text: string): void
}
// 状态的类型
type State = {
  text: string
}

class TodoAdd extends React.Component<Props,State> {
  state: State={
    text: ''
  }
 
  onAdd=(e:  React.KeyboardEvent<HTMLInputElement>)=>{
     const {text}=this.state  
     // 1 非空判断
    if(text.trim()==='')return 
   // console.log('e.keyCode',e.keyCode===13)
if(e.code==='Enter'){

this.props.onAddTodo(this.state.text)
 // 2 清空文本框的值
this.setState({
  text:''
})
}
  }
  onchange=(e: React.ChangeEvent<HTMLInputElement>)=>{

this.setState({
  text: e.target.value
})
  }
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          value={this.state.text}
          onChange={this.onchange}
       onKeyDown={this.onAdd}
        />
      </header>
    )
  }
}

export default TodoAdd
